<template>
  <div>
    <van-nav-bar left-text left-arrow @click-left="$router.back()">
      <template #right>
        <van-icon class="iconfont icon-map" size="18" @click="$router.push('/map')"/>
      </template>
      <template #title>
        <van-search v-model="value" placeholder="请输入小区或者地址" background="none">
          <template #label>
            <div @click="onSearch">{{city}}</div>
          </template>
        </van-search>
      </template>
    </van-nav-bar>
    <MuKh v-model="list"></MuKh>
    <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
 <template #default>
    <ListQQ :list="list"></ListQQ>
  </template>
</van-list>

  </div>
</template>

<script>
import { gethouses } from '@/api/map'
import ListQQ from '@/components/listqq.vue'
import MuKh from '@/components/mukh.vue'
export default {
  name: 'VueHaowuList',
  components: {
    ListQQ,
    MuKh
  },
  data () {
    return {
      value: '',
      loading: false,
      finished: false,
      count: 1,
      list: [],
      newList: [],
      hhh: 0,
      id: ''
    }
  },
  computed: {
    city () {
      return localStorage.getItem('dan')
    }
  },
  mounted () {
    JSON.parse(localStorage.getItem('hot'))
  },
  created () {

  },
  methods: {
    async onLoad () {
      let city = ''
      if (city === '') {
        const hot = JSON.parse(localStorage.getItem('hot'))
        city = hot.value
      } else {
        const hot = JSON.parse(localStorage.getItem('hotlist'))
        hot.forEach((item) => {
          city = item.value
        })
      }
      const res = await gethouses({
        id: city
      })
      // console.log(res)
      this.hhh = res.body.count
      this.list.push(...res.body.list)
      this.loading = false
      this.count++
      if (this.list.length >= this.hhh) {
        this.finished = true
      }
    },
    onSearch () {
      this.$router.push('/city')
      console.log(1)
    },
    add () {
      console.log(1)
    }

  }
}
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar__content {
  background-color: #21b97a;
  height: 60px;
  .van-nav-bar__left {
    .van-icon {
      color: #fff;
    }
  }
  .van-nav-bar__title {
    max-width: 100%;
    .van-search {
      padding-left: -30px;
      .van-search__label {
        padding-left: -10px;
      }
    }
  }
  .van-nav-bar__right {
    .van-icon {
      color: #fff;
    }
  }
}
/deep/ .van-field__control {
  font-size: 14px;
  margin-left: 8px;
}
</style>
